<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '添加'}模板`,
			size: '850px'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item label="基础配置">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									style="width: 100%"
									placeholder="请选择事业部"
									filterable
									:disabled="editing"
									@change="changeBiz"
								>
									<el-option
										v-for="item in business"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="品牌" prop="bra_id">
								<cl-select
									v-model="form.bra_id"
									placeholder="请选择品牌"
									filterable
									style="width: 100%"
								>
									<el-option
										v-for="item in bizRefData.brand"
										:key="item.bra_id"
										:label="item.bra_name"
										:value="item.bra_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="模板名称" prop="name">
								<el-input v-model="form.name" placeholder="请输入模板名称" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="网页标题" prop="title">
								<el-input v-model="form.title" placeholder="请输入网页标题" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="网页背景色" prop="bg_color">
								<div class="flex">
									<cl-flex1>
										<el-input
											v-model="form.bg_color"
											placeholder="请输入网页背景色"
										/>
									</cl-flex1>
									<el-color-picker v-model="form.bg_color" class="ml-1" />
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="开启评论" prop="enable_mes">
								<cl-select v-model="form.enable_mes" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="enable_service">
								<template #label>
									开启客服
									<span class="tips">(用于PC过审是，请选择“否”)</span>
								</template>
								<cl-select v-model="form.enable_service" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="enable_form">
								<template #label>
									开启表单
									<span class="tips">(用于PC过审是，请选择“否”)</span>
								</template>
								<cl-select v-model="form.enable_form" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="表单类型" prop="form_type">
								<cl-select v-model="form.form_type" style="width: 100%">
									<el-option :value="1" label="商城" />
									<el-option :value="2" label="拼团" />
								</cl-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item prop="mul_city" label="开启表单城市多选">
								<cl-select v-model="form.mul_city" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="城市" prop="city_data">
								<el-select
									v-model="form.city_data"
									multiple
									collapse-tags
									filterable
									clearable
									style="width: 100%"
								>
									<el-option
										v-for="v in cityList"
										:key="v.value"
										:value="v.label"
										:label="v.label"
									/>
									<el-option value="其他" label="其他" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="is_payment" label="开启表单支付">
								<cl-select v-model="form.is_payment" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="表单支付方式" prop="form_pay">
								<cl-select v-model="form.form_pay" style="width: 100%">
									<el-option :value="1" label="先表单后支付" />
									<el-option :value="2" label="先支付后表单" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="original_cost" label="表单支付原价">
								<el-input
									v-model="form.original_cost"
									placeholder="请输入金额"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									@blur="form.original_cost = $event.target.value"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="pay_money" label="表单支付金额">
								<el-input
									v-model="form.pay_money"
									placeholder="请输入支付金额"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									@blur="form.pay_money = $event.target.value"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="discount_money" label="优惠金额">
								<el-input
									v-model="form.discount_money"
									placeholder="请输入优惠金额"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									@blur="form.discount_money = $event.target.value"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="enable_location_wechat">
								<template #label>
									开启微信直接跳
									<span class="tips">(选择“是”，点击复制时直接跳转至微信)</span>
								</template>
								<cl-select
									v-model="form.enable_location_wechat"
									style="width: 100%"
								>
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="加微复制方式" prop="copy_type">
								<cl-select v-model="form.copy_type" style="width: 100%">
									<el-option :value="1" label="自动复制" />
									<el-option :value="2" label="长按复制" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="行为代码" prop="code_ids">
								<cl-select
									v-model="form.code_ids"
									style="width: 100%"
									placeholder="请选择行为代码"
									filterable
									multiple
									collapse-tags
									clearable
								>
									<el-option
										v-for="item in behaviorList"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="加微配置">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="默认弹出加微" prop="modal_show">
								<cl-select v-model="form.modal_show" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="second_copy">
								<template #label>
									开启二级复制
									<span class="tips">(开启时，使用“弹出加微模板”的内容)</span>
								</template>
								<cl-select v-model="form.second_copy" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="弹出加微模板" prop="modal_tpl" v-if="form.modal_show">
						<cl-wang-editor :key="show" ref="modalTpl" v-model.trim="form.modal_tpl" />
					</el-form-item>
					<el-form-item label="内容" prop="content">
						<cl-wang-editor :key="show" ref="content" v-model.trim="form.content" />
					</el-form-item>
				</el-card>
			</el-form-item>
			<el-form-item label="加微提示配置">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="默认显示加微提示" prop="wechat_tip_show">
								<cl-select v-model="form.wechat_tip_show" style="width: 100%">
									<el-option :value="1" label="是" />
									<el-option :value="0" label="否" />
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item
						label="加微提示模板"
						prop="wechat_tip_tpl"
						v-if="form.wechat_tip_show"
					>
						<cl-wang-editor
							:key="show"
							ref="wechatTipTpl"
							v-model.trim="form.wechat_tip_tpl"
						/>
					</el-form-item>
					<el-form-item label="内容" prop="content2">
						<cl-wang-editor :key="show" ref="content2" v-model.trim="form.content2" />
					</el-form-item>
				</el-card>
			</el-form-item>
		</el-form>
		<template #left-footer>
			<div class="flex w-100 pr-1">
				<cl-flex1></cl-flex1>
				<el-button type="primary" plain size="small" @click="goAd">
					前往新版(新版更好用)
				</el-button>
			</div>
		</template>
	</cl-drawer>
</template>
<script>
import { validate } from "@/utils/validate";
import { cityList } from "@/assets/countryLevel3";

export default {
	data() {
		return {
			form: {
				id: undefined,
				biz_id: "",
				bra_id: "",
				name: "",
				title: "",
				bg_color: "#FFFFFF",
				enable_mes: 1,
				enable_service: 1,
				enable_form: 0,
				form_type: 1,
				city_data: [],
				mul_city: 0,
				form_pay: 1,
				is_payment: 1,
				pay_money: "",
				discount_money: "",
				original_cost: "",
				enable_location_wechat: 1,
				copy_type: 2,
				code_ids: [],
				modal_show: 1,
				modal_tpl: "",
				second_copy: 0,
				content: "",
				wechat_tip_show: 1,
				wechat_tip_tpl: "",
				content2: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				name: [{ required: true, message: "请填写模板名称" }],
				title: [{ required: true, message: "请填写网页标题" }],
				bg_color: [
					{ required: true, message: "请填写网页背景色" },
					{ pattern: validate.hexColor, message: "网页背景色格式不正确" }
				],
				enable_mes: [{ required: true, message: "请选择是否开启评论" }],
				enable_service: [{ required: true, message: "请选择是否开启客服" }],
				enable_form: [{ required: true, message: "请选择是否开启表单" }],
				enable_location_wechat: [{ required: true, message: "请选择是否开启直跳微信" }],
				original_cost: [{ required: true, message: "请填写表单支付原价" }],
				city_data: [{ required: false, message: "请填写城市" }],
				pay_money: [{ required: true, message: "请填写支付金额" }],
				copy_type: [{ required: true, message: "请选择复制方式" }],
				modal_show: [{ required: true, message: "请选择是否默认弹出加微" }],
				// modal_tpl: [{ required: true, message: "请填写弹出加微模板" }],
				second_copy: [{ required: true, message: "请选择是否开启二级复制" }],
				content: [{ required: true, message: "请填写加微内容" }],
				wechat_tip_show: [{ required: true, message: "请选择是否默认显示加微提示" }],
				// wechat_tip_tpl: [{ required: true, message: "请填写加微提示模板" }],
				content2: [{ required: true, message: "请填写加微提示内容" }]
			},
			// 行为代码
			behaviorList: [],
			saving: false,
			editing: false,
			show: false,
			cityList
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		goAd() {
			const { editing } = this;
			let query = {};
			if (editing) {
				query = { ...this.form, editing: 1 };
			}
			this.$router.push({ path: "/ad", query });
			this.close();
		},
		open(editing = false, data = {}) {
			this.$refs.drawer.create(async () => {
				this.reset();
				this.show = true;
				this.editing = editing;
				if (editing) {
					Object.keys(this.form).forEach(k => {
						data[k] != undefined && (this.form[k] = data[k]);
					});
					this.form.city_data = data.city_data?.split(",").filter(Boolean);
					this.form.code_ids = data.code_ids
						?.split(",")
						.filter(Boolean)
						.map(Number);
					this.form.copy_type = data.copy_type || 2;
					// this.$refs.modalTpl.setHtml(data.modal_tpl);
					// this.$refs.content.setHtml(data.content);
					// this.$refs.wechatTipTpl.setHtml(data.wechat_tip_tpl);
					// this.$refs.content2.setHtml(data.content2);
				}
				this.init();
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		//切换事业部

		changeBiz() {
			this.form.bra_id = "";
			this.form.code_ids = [];
			this.init();
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			this.getBehaviorList();
		},
		async getBehaviorList() {
			const { biz_id } = this.form;
			if (!biz_id) {
				this.behaviorList = [];
				return;
			}
			this.behaviorList = await this.$service.ad.templateBehavior({ biz_id });
		},
		reset() {
			this.show = false;
			this.saving = false;
			// this.$refs.modalTpl.clear();
			// this.$refs.content.clear();
			// this.$refs.wechatTipTpl.clear();
			// this.$refs.content2.clear();
			this.$refs.form.resetFields();

			this.form = {
				id: undefined,
				biz_id: this.getCurrBiz(),
				bra_id: "",
				name: "",
				title: "",
				bg_color: "#FFFFFF",
				enable_mes: 1,
				enable_service: 1,
				enable_form: 0,
				form_type: 1,
				mul_city: 0,
				form_pay: 1,
				is_payment: 1,
				pay_money: "",
				discount_money: "",
				original_cost: "",
				enable_location_wechat: 1,
				copy_type: 2,
				code_ids: [],
				modal_show: 1,
				modal_tpl: "",
				second_copy: 0,
				content: "",
				wechat_tip_show: 1,
				wechat_tip_tpl: "",
				content2: "",
				city_data: []
			};
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { code_ids, city_data, discount_money, ...args } = this.form;

				let form = {
					...args,
					discount_money: discount_money || 0,
					code_ids: code_ids.join(),
					city_data: city_data.join()
				};
				await this.$service.ad[this.editing ? "templateEdit" : "templateAdd"](form).done(
					() => {
						this.saving = false;
					}
				);
				this.$message.success("操作成功");
				this.$emit("confirm", this.editing);
				this.reset();
				this.close();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.tips {
	color: #aaa;
	font-size: 12px;
}
::v-deep {
	.el-col {
		min-height: 78px;
	}
}
</style>
